import {
  Badge, Descriptions, Collapse, Divider, Button
} from 'antd';
import React from 'react';

function App() {
  const info = JSON.parse(localStorage.info);
  console.log(info);
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div style={{
        display: 'flex', height: '120px', padding: '10px', margin: '0 10px', border: '1px solid #cccccc', boxSizing: 'border-box', gap: '40px'
      }}
      >
        <svg style={{ width: '100px' }} focusable="false" aria-hidden="true" viewBox="0 0 50 50" data-testid="repository-default-logo">
          <g stroke="none" fill="none" opacity="0.304464286">
            <g>
              <polygon id="Rectangle-Copy-9" fill="#878E92" points="25 25.7703508 1.92307692 12.5 1.92307692 36.7296492 25 50" />
              <polygon id="Rectangle-Copy-10" fill="#B7BBBE" points="25.0028758 25.8125304 1.91427377 12.5 24.7223575 0 48.0826744 12.5" />
              <polygon id="Rectangle-Copy-11" fill="#576167" points="25 25.7703508 48.0769231 12.5 48.0769231 36.7296492 25 50" />
            </g>
          </g>
        </svg>
        <div>
          <h2>{info[0]}</h2>
          <p>{info[9]}</p>
        </div>
      </div>
      <div style={{
        display: 'flex', width: '100%', gap: '40px', padding: '10px', boxSizing: 'border-box'
      }}
      >

        <div style={{ width: '75%', border: '1px solid #CCCCCC', padding: '20px' }}>
          <Descriptions title={info[0]} bordered>
            <Descriptions.Item label="应用名称">{info[1]}</Descriptions.Item>
            <Descriptions.Item label="应用标识">{info[2]}</Descriptions.Item>
            <Descriptions.Item label="应用版本">{info[3]}</Descriptions.Item>
            <Descriptions.Item label="应用分类">{info[4]}</Descriptions.Item>
            <Descriptions.Item label="应用主体">{info[5]}</Descriptions.Item>
            <Descriptions.Item label="GPU">{info[6]}</Descriptions.Item>
            <Descriptions.Item label="CPU核心">{info[7]}</Descriptions.Item>
            <Descriptions.Item label="CPU线程">{info[8]}</Descriptions.Item>
            <Descriptions.Item label="语言基础及版本">{info[9]}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{info[10]}</Descriptions.Item>
            <Descriptions.Item label="最近更新时间">
              {info[11]}
            </Descriptions.Item>
            <Descriptions.Item label="维护状态" span={3}>
              <Badge status="processing" text="持续维护更新中" />
            </Descriptions.Item>
            <Descriptions.Item label="架构">{info[12]}</Descriptions.Item>
            <Descriptions.Item label="最新版本">{info[13]}</Descriptions.Item>
            <Descriptions.Item label="历史版本数量">{info[14]}</Descriptions.Item>
            <Descriptions.Item label="应用描述">
              可拓展的识别性能
              <br />
              全端可运行
              <br />
              数以万亿级的数据训练
              <br />
              精准的图文识别
              <br />
              精简的可部署化能力
              <br />
              附加翻译整理分段能力.................
              <br />
            </Descriptions.Item>
          </Descriptions>
        </div>
        <div>
          <Divider orientation="left">历史版本</Divider>
          <Collapse
          size="small"
          items={[
            {
              key: '1',
              label: 'v0.0.10(稳定版本)',
              children: <Button type="link">下载该版本</Button>,
            },
            {
              key: '2',
              label: 'v0.0.6',
              children: <Button type="link">下载该版本</Button>,
            },
            {
              key: '3',
              label: 'v0.0.4',
              children: <Button type="link">下载该版本</Button>,
            },
            {
              key: '4',
              label: 'v0.0.2(稳定版本)',
              children: <Button type="link">下载该版本</Button>,
            },
          ]}
          />
        </div>
      </div>
    </div>
   
  );
}
export default App;